<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="laravel-的资源任务编译器-laravel-mix" tabindex="-1"><a class="header-anchor" href="#laravel-的资源任务编译器-laravel-mix"><span>Laravel 的资源任务编译器 Laravel Mix</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#installation">安装 &amp; 配置</a></li>
<li><a href="#running-mix">运行 Mix</a></li>
<li><a href="#working-with-stylesheets">使用样式</a>
<ul>
<li><a href="#less">Less</a></li>
<li><a href="#sass">Sass</a></li>
<li><a href="#stylus">Stylus</a></li>
<li><a href="#postcss">PostCSS</a></li>
<li><a href="#plain-css">纯 CSS</a></li>
<li><a href="#url-processing">URL 处理</a></li>
<li><a href="#css-source-maps">资源映射</a></li>
</ul>
</li>
<li><a href="#working-with-scripts">使用 JavaScript</a>
<ul>
<li><a href="#vendor-extraction">提取 Vendor</a></li>
<li><a href="#react-support">React</a></li>
<li><a href="#vanilla-js">原生 JS</a></li>
<li><a href="#custom-webpack-configuration">自定义 Webpack 配置</a></li>
</ul>
</li>
<li><a href="#copying-files-and-directories">复制文件 &amp; 目录</a></li>
<li><a href="#versioning-and-cache-busting">版本控制 &amp; 缓存清除</a></li>
<li><a href="#browsersync-reloading">Browsersync 重新加载</a></li>
<li><a href="#environment-variables">环境变量</a></li>
<li><a href="#notifications">通知</a></li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>Laravel Mix 提供了简洁且可读性高的 API，用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤。可以通过简单链式调用来定义资源的编译。例如：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你曾经对于使用 Webpack 及编译资源感到困惑和不知所措，那么你会爱上 Laravel Mix。当然，Laravel 也并没有强迫你一定要使用 Mix，你可以自由使用任何你喜欢的资源编译工具，或者不用也行。</p>
<h2 id="安装-配置" tabindex="-1"><a class="header-anchor" href="#安装-配置"><span>安装 &amp; 配置</span></a></h2>
<h4 id="安装-node" tabindex="-1"><a class="header-anchor" href="#安装-node"><span>安装 Node</span></a></h4>
<p>在开始使用 Mix 之前，必须先确保你的机器上安装了 Node.js 和 NPM。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">node <span class="token operator">-</span>v</span>
<span class="line">npm <span class="token operator">-</span>v</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>默认情况下，Laravel Homestead 会包含你所需的一切。当然，如果你没有使用 Vagrant，就使用简单的图形安装程序从 <a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">其下载页面</a> 安装最新版的 Node 和 NPM。</p>
<h4 id="laravel-mix" tabindex="-1"><a class="header-anchor" href="#laravel-mix"><span>Laravel Mix</span></a></h4>
<p>然后就只需要安装 Laravel Mix。在新的 Laravel 项目中，你可以在目录结构的根目录中找到一个 <code v-pre>package.json</code> 文件，它包括了运行基本的 Mix 所需的内容。就如同 <code v-pre>composer.json</code> 文件，只不过它定义的是 Node 的依赖而不是 PHP。你可以使用以下的命令安装它引用的依赖项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你正在 Windows 系统上进行开发，或者在 Windows 主机系统上运行虚拟机，那你要在运行 <code v-pre>npm install</code> 命令时使用 <code v-pre>--no-bin-links</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install <span class="token operator">--</span>no<span class="token operator">-</span>bin<span class="token operator">-</span>links</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="运行-mix" tabindex="-1"><a class="header-anchor" href="#运行-mix"><span>运行 Mix</span></a></h2>
<p>Mix 是位于 <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">Webpack</a> 顶部的配置层，所以要运行 Mix 任务，只需要执行默认的Laravel <code v-pre>package.json</code> 文件中包含的一个 NPM 脚本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 运行所有 Mix 任务...</span></span>
<span class="line">npm run dev</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 运行所有 Mix 任务并缩小输出..</span></span>
<span class="line">npm run production</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="监控资源文件修改" tabindex="-1"><a class="header-anchor" href="#监控资源文件修改"><span>监控资源文件修改</span></a></h4>
<p><code v-pre>npm run watch</code> 会在你的终端里持续运行，监控所有相关的资源文件以便进行更改。Webpack 会在检测到文件更改时自动重新编译资源：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run watch</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>在某些环境中，当文件更改时，Webpack 不会更新。如果系统出现这种情况，请考虑使用 <code v-pre>watch-poll</code> 命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run watch<span class="token operator">-</span>poll</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="使用样式" tabindex="-1"><a class="header-anchor" href="#使用样式"><span>使用样式</span></a></h2>
<p><code v-pre>webpack.mix.js</code> 文件是所有资源编译的入口点。可以把它看作是 Webpack 中的轻量级配置封装清单。Mix 任务可以一起被链式调用，以精确定义资源的编译方式。</p>
<h3 id="less" tabindex="-1"><a class="header-anchor" href="#less"><span>Less</span></a></h3>
<p><code v-pre>less</code> 方法可以用于将 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> 编译为 CSS。在 <code v-pre>webpack.mix.js</code> 中这样写，可以将 <code v-pre>app.less</code> 编译到 <code v-pre>public/css/app.css</code> 中。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>可以多次调用 <code v-pre>less</code> 方法来编译多个文件:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/less/admin.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>如果要自定义编译的 CSS 的文件名，可以将一个完整的路径作为第二个参数传给 <code v-pre>less</code> 方法:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/stylesheets/styles.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你需要重写 <a href="https://github.com/webpack-contrib/less-loader#options" target="_blank" rel="noopener noreferrer">底层 Less 插件选项</a>，你可以将一个对象作为第三个参数传到 <code v-pre>mix.less()</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    strictMath<span class="token punctuation">:</span> <span class="token constant boolean">true</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass" tabindex="-1"><a class="header-anchor" href="#sass"><span>Sass</span></a></h3>
<p><code v-pre>sass</code> 方法可以将 <a href="http://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass</a> 编译为 CSS。用法如下所示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>跟 <code v-pre>less</code> 方法一样，你可以将多个 Sass 文件编译到各自的 CSS 文件中，甚至可以自定义生成的 CSS 的输出目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/admin.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>另外，<a href="https://github.com/sass/node-sass#options" target="_blank" rel="noopener noreferrer">Node-Sass 插件选项</a> 也同样可以作为第三个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    precision<span class="token punctuation">:</span> <span class="token number">5</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stylus" tabindex="-1"><a class="header-anchor" href="#stylus"><span>Stylus</span></a></h3>
<p>类似于 Less 和 Sass，<code v-pre>stylus</code> 方法可以将 <a href="http://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus</a> 编译为 CSS：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">stylus</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你也可以安装其他的 Stylus 插件，例如 <a href="https://github.com/jescalan/rupture" target="_blank" rel="noopener noreferrer">Rupture</a>。首先，通过 NPM (<code v-pre>npm install rupture</code>) 来安装插件，然后在调用 <code v-pre>mix.stylus()</code> 时引用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">stylus</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'rupture'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="postcss" tabindex="-1"><a class="header-anchor" href="#postcss"><span>PostCSS</span></a></h3>
<p>Laravel Mix 自带了一个用来转换 CSS 的强大工具 <a href="http://postcss.org/" target="_blank" rel="noopener noreferrer">PostCSS</a>。默认情况下， Mix 利用了流行的 <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">Autoprefixer</a> 插件来自动添加所需要的 CSS3 浏览器引擎前缀。不过，你也可以自由添加任何适合你应用程序的插件。首先，通过 NPM 安装所需的插件，然后在 <code v-pre>webpack.mix.js</code> 文件中引用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        postCss<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'postcss-css-variables'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">]</span></span>
<span class="line">   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="纯-css" tabindex="-1"><a class="header-anchor" href="#纯-css"><span>纯 CSS</span></a></h3>
<p>如果你只是想将一些纯 CSS 样式合并成单个的文件, 你可以使用 <code v-pre>styles</code> 方法。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">styles</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/css/vendor/normalize.css'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/css/vendor/videojs.css'</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/all.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="url-处理" tabindex="-1"><a class="header-anchor" href="#url-处理"><span>URL 处理</span></a></h3>
<p>由于 Laravel Mix 是建立在 Webpack 之上的，所以了解一些 Webpack 概念就非常有必要。编译 CSS 的时候，Webpack 会重写和优化样式表中对 <code v-pre>url()</code> 的调用。 一开始听起来可能会觉得奇怪，但这确实是一个非常强大的功能。试想一下我们要编译一个包含图片的相对路径的 Sass 文件:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">    background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'../images/example.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>{note} 任何给定 <code v-pre>url()</code> 的绝对路径会被排除在 URL 重写之外。例如 <code v-pre>url('/images/thing.png')</code> 或者 <code v-pre>url('http://example.com/images/thing.png')</code> 不会被修改。</p>
</blockquote>
<p>默认情况下，Laravel Mix 和 Webpack 会找到 <code v-pre>example.png</code>，然后把它复制到你的 <code v-pre>public/images</code> 目录下，然后重写生成的样式中的 <code v-pre>url()</code>。这样，你编译之后的 CSS 会变成：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">  background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token operator">/</span>images<span class="token operator">/</span>example<span class="token operator">.</span>png<span class="token operator">?</span>d41d8cd98f00b204e9800998ecf8427e<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但如果你想以你喜欢的方式配置现有的文件夹结构，可以禁用 <code v-pre>url()</code> 的重写：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/app/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">      processCssUrls<span class="token punctuation">:</span> <span class="token constant boolean">false</span></span>
<span class="line">   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在你的 <code v-pre>webpack.mix.js</code> 文件像上面这样配置之后，Mix 将不再匹配 <code v-pre>url()</code> 或者将资源复制到你的 public 目录。换句话说，编译后的 CSS 会跟原来输入的一样：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">    background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"../images/thing.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="资源映射" tabindex="-1"><a class="header-anchor" href="#资源映射"><span>资源映射</span></a></h3>
<p>默认情况下资源映射是禁用的，可以在 <code v-pre>webpack.mix.js</code> 文件中调用 <code v-pre>mix.sourceMaps()</code> 方法来开启它。尽管它会带来一些编译／性能的成本，但在使用编译资源时，可以为使用浏览器的开发人员工具提供额外的调试信息：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">sourceMaps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用脚本" tabindex="-1"><a class="header-anchor" href="#使用脚本"><span>使用脚本</span></a></h2>
<p>Mix 提供了一些函数来处理 JavaScript 文件，像是编译 ECMAScript 2015、模块绑定、压缩以及简单地合并纯 JavaScript 文件。更棒的是，这些操作都不需要进行任何自定义的配置：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>仅仅这上面的一行代码，就支持：</p>
<ul>
<li>ES 2015 语法</li>
<li>模块</li>
<li>编译 <code v-pre>.vue</code> 文件</li>
<li>生产环境压缩代码</li>
</ul>
<h3 id="提取依赖库" tabindex="-1"><a class="header-anchor" href="#提取依赖库"><span>提取依赖库</span></a></h3>
<p>将应用程序特定的 JavaScript 与依赖库捆绑在一起有个潜在的缺点，会使得长期缓存更加困难。例如，即使应用程序使用的依赖库没有被更改，只要有代码被单独更新，都会强制浏览器重新下载所有依赖库。</p>
<p>如果你打算频繁更新应用程序的 JavaScript，应该考虑将所有的依赖库提取到自己的文件中。如此一来，应用程序代码的更改就不会影响到大型 <code v-pre>vendor.js</code> 文件的缓存。而 Mix 的 <code v-pre>extract</code> 方法能使之变得轻而易举：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">extract</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'vue'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>extract</code> 方法接受一个数组参数。这个数组是要提取到 <code v-pre>vendor.js</code> 文件中的所有的依赖库或模块。比如上面的例子中，Mix 将生成以下文件：</p>
<ul>
<li><code v-pre>public/js/manifest.js</code>: <em>Webpack 运行的内容清单</em></li>
<li><code v-pre>public/js/vendor.js</code>: <em>依赖库</em></li>
<li><code v-pre>public/js/app.js</code>: <em>应用代码</em></li>
</ul>
<p>为了避免 <code v-pre>JavaScript</code> 报错，请务必按正确的顺序加载这些文件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/manifest.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/vendor.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/app.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="react" tabindex="-1"><a class="header-anchor" href="#react"><span>React</span></a></h3>
<p>Mix 可以自动安装 Babel 插件来支持 React。你只需将 <code v-pre>mix.js()</code> 的调用替换成 <code v-pre>mix.react()</code> 即可：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.jsx'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>React 会在后台自动下载，其中包括对应版本的 <code v-pre>babel-preset-react</code> Babel 插件。</p>
<h3 id="原生-js" tabindex="-1"><a class="header-anchor" href="#原生-js"><span>原生 JS</span></a></h3>
<p>类似使用 <code v-pre>mix.styles()</code> 来合并多个样式表一样，你也可以使用 <code v-pre>scripts()</code> 方法来合并并压缩多个 JavaScript 文件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">scripts</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/js/admin.js'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/js/dashboard.js'</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js/all.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这个选项对于不需要为 JavaScript 编写 Webpack 的旧项目非常有用。</p>
<blockquote>
<p>{tip} <code v-pre>mix.scripts()</code> 的一个微小变化是 <code v-pre>mix.babel()</code>。其方法签名与 <code v-pre>scripts</code> 一样。不过，连接的文件会经过 Babel 编译，将所有 ES2015 的代码转换为所有浏览器都能识别的原生 JavaScript。</p>
</blockquote>
<h3 id="自定义-webpack-配置" tabindex="-1"><a class="header-anchor" href="#自定义-webpack-配置"><span>自定义 Webpack 配置</span></a></h3>
<p>Laravel Mix 会在后台引用一个预先配置的 <code v-pre>webpack.config.js</code> 文件，以提供启动和运行的速度。如果你需要引用特殊的加载程序或插件，或者你更喜欢使用 Stylus 而不是 Sass。在这种情况下，你可能需要手动修改此文件，那么你有两个选择：</p>
<h4 id="合并自定义配置" tabindex="-1"><a class="header-anchor" href="#合并自定义配置"><span>合并自定义配置</span></a></h4>
<p>Mix 提供了一个 <code v-pre>webpackConfig</code> 方法来合并任何 <code v-pre>Webpack</code> 配置以覆盖默认配置。因此你不需要复制和维护 <code v-pre>webpack.config.js</code> 的文件副本。<code v-pre>webpackConfig</code> 方法接受一个包含任何要应用的 <a href="https://webpack.js.org/configuration/" target="_blank" rel="noopener noreferrer">Webpack 配置项</a> 的对象：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">webpackConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">        modules<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">            path<span class="token operator">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string single-quoted-string">'vendor/laravel/spark/resources/assets/js'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">]</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="自定义配置文件" tabindex="-1"><a class="header-anchor" href="#自定义配置文件"><span>自定义配置文件</span></a></h4>
<p>如果想完全自定义 Webpack 配置，就将 <code v-pre>node_modules/laravel-mix/setup/webpack.config.js</code> 文件复制到项目的根目录。然后在 <code v-pre>package.json</code> 文件中将所有 <code v-pre>--config</code> 的值指向新复制的配置文件。采用这种方法进行自定义，如果后续 Mix 版本有更新时，需要手动合并 <code v-pre>webpack.config.js</code> 并到你的自定义文件中。</p>
<h2 id="复制文件-目录" tabindex="-1"><a class="header-anchor" href="#复制文件-目录"><span>复制文件 &amp; 目录</span></a></h2>
<p><code v-pre>copy</code> 方法用于将文件和目录复制到新位置。当 <code v-pre>node_modules</code> 目录中的特定资源需要被重定位到 <code v-pre>public</code> 文件夹时会很有用。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">copy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'node_modules/foo/bar.css'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/bar.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>复制目录时，<code v-pre>copy</code> 方法会平面化目录的结构。要维护目录的原始结构，应该使用 <code v-pre>copyDirectory</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'assets/img'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="版本控制-缓存清除" tabindex="-1"><a class="header-anchor" href="#版本控制-缓存清除"><span>版本控制／缓存清除</span></a></h2>
<p>许多的开发者会对其编译的资源文件中加上时间戳或是唯一的令牌作为后缀，以此来强迫浏览器加载全新的资源文件，而不是旧版本的代码副本。你可以使用 Mix 的 <code v-pre>version</code> 方法处理它们。</p>
<p><code v-pre>version</code> 方法会自动为所有编译文件的文件名附加一个唯一的哈希值，从而实现更方便的缓存清除功能：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">version</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>生成版本化文件后，你不会知道确切的文件名。因此，你应该在你的视图中使用 Laravel 的全局辅助函数 <code v-pre>mix</code> 来正确加载名称被哈希后的文件。<code v-pre>mix</code> 函数会自动确定被哈希的文件名称：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string double-quoted-string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string double-quoted-string">"{{ mix('/css/app.css') }}"</span><span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>因为在开发中通常是不需要版本化，你可以指示版本控制过程仅在 <code v-pre>npm run production</code> 运行期间进行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span>mix<span class="token operator">.</span><span class="token function">inProduction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    mix<span class="token operator">.</span><span class="token function">version</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="browsersync-重新加载" tabindex="-1"><a class="header-anchor" href="#browsersync-重新加载"><span>Browsersync 重新加载</span></a></h2>
<p><a href="https://browsersync.io/" target="_blank" rel="noopener noreferrer">BrowserSync</a> 可以自动监控你的文件变化，并将更改注入浏览器，而无需手动刷新。你可以通过调用 <code v-pre>mix.browserSync()</code> 方法来启用这个功能的支持：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">browserSync</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'my-domain.dev'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或者...</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// https://browsersync.io/docs/options</span></span>
<span class="line">mix<span class="token operator">.</span><span class="token function">browserSync</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    proxy<span class="token punctuation">:</span> <span class="token string single-quoted-string">'my-domain.dev'</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以将字符串 (代理) 或者对象 (BrowserSync 设置) 传给这个方法。再使用 <code v-pre>npm run watch</code> 命令来开启 Webpack 的开发服务器。现在，当你修改脚本或者 PHP 文件时，浏览器会即时刷新页面以响应你的更改。</p>
<h2 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量"><span>环境变量</span></a></h2>
<p>你可以通过使用 <code v-pre>MIX_</code> 在 <code v-pre>.env</code> 文件中增加前缀来将环境变量注入到 Mix 中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token constant">MIX_SENTRY_DSN_PUBLIC</span><span class="token operator">=</span>http<span class="token punctuation">:</span><span class="token comment">//example.com</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>在 <code v-pre>.env</code> 文件中定义变量之后，可以通过 <code v-pre>process.env</code> 对象进行访问。如果在运行 <code v-pre>watch</code> 任务时需要更改这个值，则需要重新启动<code v-pre>watch</code> 任务：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">process<span class="token operator">.</span>env<span class="token operator">.</span><span class="token constant">MIX_SENTRY_DSN_PUBLIC</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="通知" tabindex="-1"><a class="header-anchor" href="#通知"><span>通知</span></a></h2>
<p>正常情况下，Mix 会将每个包的编译的编译结果以系统通知的方式反馈给你。如果你希望停用这些通知（比如在生产服务器上使用了 Mix），可以通过 <code v-pre>disableNotifications</code> 方法实现：​<br>
mix.disableNotifications();</p>
<h2 id="译者署名" tabindex="-1"><a class="header-anchor" href="#译者署名"><span>译者署名</span></a></h2>
<table>
<thead>
<tr>
<th>用户名</th>
<th>头像</th>
<th>职能</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/cmzz" target="_blank" rel="noopener noreferrer">@zyxcba</a></td>
<td><img src="https://avatars3.githubusercontent.com/u/6111715?v=3&amp;s=100" alt="6111715?v=3&amp;s=100"></td>
<td>翻译</td>
<td><a href="http://kaolake.net/" target="_blank" rel="noopener noreferrer">考拉客</a> - 考拉微商店主加盟立返100元！</td>
</tr>
<tr>
<td><a href="https://learnku.com/users/5350" target="_blank" rel="noopener noreferrer">@JokerLinly</a></td>
<td><img src="https://cdn.learnku.com/uploads/avatars/5350_1481857380.jpg" alt="5350_1481857380.jpg"></td>
<td>Review</td>
<td>Stay Hungry. Stay Foolish.</td>
</tr>
</tbody>
</table>
<hr>
<blockquote>
<p>{note} 欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创开源社区。</p>
<p>转载请注明：本文档由 Laravel China 社区 <a href="https://laravel-china.org/" target="_blank" rel="noopener noreferrer">laravel-china.org</a> 组织翻译，详见 <a href="https://learnku.com/laravel/t/5756/laravel-55-document-translation-call-come-and-join-the-translation" target="_blank" rel="noopener noreferrer">翻译召集帖</a>。</p>
<p>文档永久地址： <a href="https://learnku.com/docs/laravel" target="_blank" rel="noopener noreferrer">《Laravel 中文文档》</a></p>
</blockquote>
</div></template>


